<template>
  <div>
    <input type="file" @change="handleImageUpload" accept="image/*" />
    <button @click="recognizeText">识别文字</button>
    <p>{{ recognizedText }}</p>
  </div>
</template>

<script>
import Tesseract from 'tesseract.js';

export default {
  data() {
    return {
      imageFile: null,
      recognizedText: ''
    };
  },
  methods: {
    handleImageUpload(event) {
      this.imageFile = event.target.files[0];
    },
    async recognizeText() {
      if (!this.imageFile) {
        alert('请选择一张图片');
        return;
      }

      const { data: { text } } = await Tesseract.recognize(
        this.imageFile,
        'chi_sim',
        {
          logger: m => console.log(m)
        }
      );

      this.recognizedText = text;
    }
  }
};
</script>
